<template "ui/head" />
<template "ui/css" />
<template "ui/iframe" />
<template "ui/background-none" />
<template tplx="upload_gallery">
    <div class="upload-gallery">
        <div class="_topbar">
            <div class="layui-btn-group">
                <div class="layui-btn layui-btn-sm layui-btn-primary _dir" x-show="showDrop">
                    <span x-text="className"></span>
                    <i class="layui-icon layui-icon-down layui-font-12"></i>
                </div>
                <button class="layui-btn layui-btn-sm layui-btn-primary _edit" x-show="showEdit">
                    操作
                    <i class="layui-icon layui-icon-down layui-font-12"></i>
                </button>
            </div>
            <div class="_pos" x-html="textPos"></div>
            <div class="layui-btn-group _btn">
                <button class="layui-btn layui-btn-sm layui-btn-warm" x-show="showBack" @click="onBack">返回</button>
                <block x-if="!showBack">
                    <button class="layui-btn layui-btn-sm layui-btn-normal"><input type="file" accept="image/*" multiple title="批量上传" @change="chooseImg" />上传</button>
                </block>
                <button class="layui-btn layui-btn-sm layui-btn-danger" title="删除所选图片" x-show="showDel" @click="onDel">删除</button>
                <button class="layui-btn layui-btn-sm" @click="onOk">确认</button>
            </div>
        </div>
        <ul class="_gallery">
            <block x-for="(item,index) in listData" :key="item.name">
                <li :class="listActive[`_${item.id}`]?'active':''" @click="onClick(item,index)" @mouseenter="onHover(`enter`,item)" @mouseleave="onHover(`leave`,item)">
                    <img :data-lazy="item.src" :src="item.isdir||item.isload?item.src:false" :class="item.isdir?'_bf':item.isload?'':'lazyload'" @load="onImgload(index)" />
                    <text x-text="getName(item)"></text>
                    <div class="_checked">
                        <i class="layui-icon layui-icon-ok"></i>
                    </div>
                </li>
            </block>
        </ul>
        <div class="_nodata" x-show="showNodata">没有图片</div>
        <div class="clear"></div>
        <div class="_pager" x-show="!showNodata">
            <div class="upload-gallery-pager"></div>
        </div>
    </div>
</template>
<script type="text/javascript">let config={id:`{{$LF['id']}}`,callback:`{{$LF['callback']}}`,many:`{{$LF['many']}}`,pos:`upload/{{$_L['ROOTID']}}/image/`};</script>
<style>html,body{width:100%;height:100%;overflow:hidden}.layui-menu{max-height:calc(100vh - 100px);overflow:auto}.layui-menu li{font-size:12px}.layui-dropdown{min-width:auto}.layui-menu-body-title{display:flex;align-items:center;padding:3px 15px}.layui-menu-body-title>.layui-icon{position:relative;right:0;top:0;margin:0 5px 0 0;font-size:12px}</style>
<template "ui/foot" />